<template>
    <div class="login">
        <p>首次使用请点击左下角“注册账号”</p>
        <div><van-field v-model="info.phone" placeholder="请输入手机号" /></div>
        <div><van-field v-model="info.password" placeholder="请输入密码（默认手机后6位）" /></div>
        <div class="loginButton" @click="enterRead">登录</div>
        <div @click="getRegister">注册账号</div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, RouterView } from 'vue-router'
import axios from 'axios'
import { loginApi } from "../api/index.js";


onMounted(() => {
});
const info = ref({
    phone: '17858252091',
    password: '252091'
});
const router = useRouter()
const getRegister = () => {
    router.push({ name: 'register' })
}
async function enterRead() {
    try {
        let obj = {
            phone: info.value.phone,
            password: info.value.password
        };
        let res = await loginApi(obj) // 替换为实际的登录端点
        const token = res.data.token; // 假设token在响应数据的token字段中
        localStorage.setItem('token', token); // 存储token
        router.push({ name: 'read' });
    } catch (err) {
        console.log(err);
    }
    // try {
    //     let obj = {
    //         phone: info.value.phone,
    //         password: info.value.password
    //     }
    //     let res = await loginApi(obj)
    //     console.log(res);
    //     router.push({ name: 'read' })
    // } catch (err) {
    //     console.log(err);
    // }
}
</script>

<style scoped lang="less">
.login {
    width: 100vw;
    height: 100vh;
    background: #fff;
    padding: 20px;

    p {
        padding: 50px 0;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .loginButton {
        margin: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        background: #407FF1;
        border-radius: 6px 6px 6px 6px;
        color: #fff;
    }
}
</style>